<!doctype html>
<html lang="zh">

<head>
  <title>Shape</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/avatar.js';
    import '../../packages/mdui/components/button.js';
    import '../../packages/mdui/components/card.js';
    import '../../packages/mdui/components/checkbox.js';
    import '../../packages/mdui/components/chip.js';
    import '../../packages/mdui/components/fab.js';
    import '../../packages/mdui/components/linear-progress.js';
    import '../../packages/mdui/components/list.js';
    import '../../packages/mdui/components/list-item.js';
    import '../../packages/mdui/components/menu.js';
    import '../../packages/mdui/components/menu-item.js';
    import '../../packages/mdui/components/navigation-bar.js';
    import '../../packages/mdui/components/navigation-bar-item.js';
    import '../../packages/mdui/components/radio-group.js';
    import '../../packages/mdui/components/radio.js';
    import '../../packages/mdui/components/switch.js';
  </script>
</head>

<body>
  <main>
    <section>
      <h2>Avatar</h2>
      <mdui-avatar>S</mdui-avatar>
    </section>
    <section>
      <h2>Button</h2>
      <mdui-button>Button</mdui-button>
    </section>
    <section>
      <h2>Card</h2>
      <mdui-card style="width: 100px; height: 68px;"></mdui-card>
    </section>
    <section>
      <h2>Checkbox</h2>
      <mdui-checkbox>Checkbox</mdui-checkbox>
    </section>
    <section>
      <h2>Chip</h2>
      <mdui-chip variant="assist" deletable>
        Chip
        <mdui-avatar slot="start" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
      </mdui-chip>
    </section>
    <section>
      <h2>Fab</h2>
      <mdui-fab size="small" icon="edit"></mdui-fab>
      <mdui-fab icon="edit"></mdui-fab>
      <mdui-fab size="large" icon="edit"></mdui-fab>
    </section>
    <section>
      <h2>Linear progress</h2>
      <mdui-linear-progress></mdui-linear-progress>
    </section>
    <section>
      <h2>List</h2>
      <mdui-list rounded>
        <mdui-list-item>Item 1</mdui-list-item>
        <mdui-list-item active>Item 2</mdui-list-item>
        <mdui-list-item>Item 3</mdui-list-item>
      </mdui-list>
    </section>
    <section>
      <h2>Menu</h2>
      <mdui-menu>
        <mdui-menu-item>Item 1</mdui-menu-item>
        <mdui-menu-item>Item 2</mdui-menu-item>
        <mdui-menu-item>Item 3</mdui-menu-item>
      </mdui-menu>
    </section>
    <section>
      <h2>Navigation bar</h2>
      <mdui-navigation-bar style="position: relative">
        <mdui-navigation-bar-item icon="edit">Edit</mdui-navigation-bar-item>
        <mdui-navigation-bar-item icon="edit">Edit</mdui-navigation-bar-item>
        <mdui-navigation-bar-item icon="edit">Edit</mdui-navigation-bar-item>
      </mdui-navigation-bar>
    </section>
    <section>
      <h2>Radio</h2>
      <mdui-radio-group>
        <mdui-radio>Radio</mdui-radio>
      </mdui-radio-group>
    </section>
    <section>
      <h2>Switch</h2>
      <mdui-switch>Switch</mdui-switch>
    </section>
  </main>
</body>

</html>
